<template>
	<div style="background-color: #f4fafe;">
		<div style="width: 90%;margin-left: 5%;font-size: 1.25rem;height: 2.875rem;line-height:2.875rem;">课程介绍</div>
		<div class="main">

			<div class="live-course-thumb">
				<img :src="CourseInfList.courseImg" />
			</div>
			<div class="right-course-thumb">
				<div class="course-info-title">{{CourseInfList.courseName}}</div>
				<p class="desc">{{CourseInfList.courseDescribe}}</p>
				<div class="has-button">授课老师：{{TeachersName}}</div>
			</div>

		</div>
		<div style="width: 90%;margin-top: 1.25rem;margin-left: 5%;font-size: 1.25rem;">课程目录</div>
		<div class="main1"  v-show="active==1">
			<div class="live-course-thumb1">
				<div style="color: #c1c1c1;display: flex;"><i class="el-icon-video-play" style="font-size: 1.25rem;margin-right: 0.625rem;color: #03d3bd;"></i>已完成任务点:
					<el-progress :text-inside="true" :stroke-width="20" :percentage="Completion" style="width: 6.25rem;margin-left: 1.25rem;"
					 color="#03d3bd"></el-progress>
				</div>

				<div class="chapter-item">
					<el-collapse v-model="activeNames" @change="handleChange">
						<el-collapse-item v-for="Item in ChapterList" :key="Item.id" @click.native="ChapterChange(Item.id)">
							<template slot="title" style="font-size: 1.25rem;font-weight: 500;">
								<h4>{{Item.chapterName}}</h4>
							</template>
							<ul class="record">
								<li class="video-item" v-for="ite in PeriodList" :key="ite.id" @click="$router.push('/VideoLearning')">
									<div class="video-title"><i class="el-icon-video-play" style="font-size: 1.25rem;margin-right: 0.625rem;"></i>1-2
										{{ite.periodName}}</div>
									<div class="video-info"><span>{{ite.createTime}}</span></div>
								</li>
								
							</ul>

						</el-collapse-item>

					</el-collapse>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import {
		HttpManagerStudent
	} from "../../../../request/student.js"
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		data() {
			return {
				active: 1,
				Completion: '',
				TeachersName: '',
				ChapterList: [],
				PeriodList: [],
				CourseInfList: [],
				activeNames: ['1'],
				courseId:localStorage.getItem("ClassId"),
				
			}
		},
		methods: {
			change(e) {
				this.active = e;
			},
			getCourseInfByCourseId() {
				var parmas = {
					courseId: localStorage.getItem("ClassId")
				}
				HttpManagerStudent.getCourseInfByCourseId(parmas).then(e => {
					console.log(e);
					this.CourseInfList = e.data.data;
				})
			},
			//学生获取课程课时完成度
			getCourseCompletion() {
				var parmas = {
					courseId: localStorage.getItem("ClassId")
				}
				HttpManagerStudent.getCourseCompletion(parmas).then(e => {
					// console.log(e);
					this.Completion = Number(e.data.data);
				})
			},
			//根据课程id获取授课教师姓名
			getTeachersNameByCourseId() {
				var parmas = {
					courseId:  localStorage.getItem("ClassId")
				}
				HttpManagerStudent.getTeachersNameByCourseId(parmas).then(e => {

					this.TeachersName = e.data.data.join(',');
				})
			},
			//通过课程id获取章节
			getChapterByCourseId() {
				var parmas = {
					courseId:  localStorage.getItem("ClassId"),
					isTeacher: false
				}
				HttpManager.getChapterByCourseId(parmas).then(e => {
					console.log(e);
					this.ChapterList = e.data.data;
				})
			},
			//根据章节id获取课时
			getPeriodByChapterId(id) {
				var parmas = {
					chapterId: id,
					isTeacher: false
				}
				HttpManager.getPeriodByChapterId(parmas).then(e => {
					console.log(e);
					this.PeriodList=e.data.data;
				})
			},
			ChapterChange(id) {
				this.getPeriodByChapterId(id);
			},
			handleChange()
			{
				
			}


		},
		created() {
			this.getTeachersNameByCourseId();
			this.getCourseCompletion();
			this.getChapterByCourseId();
			this.getCourseInfByCourseId();
		}

	}
</script>

<style scoped="scoped">
	.main {
		width: 90%;
		margin: 0 auto;
		/* margin-top: 1.25rem; */
		height: 322px;
		background: rgb(255, 255, 255);
		border-radius: 8px;
		display: flex;
	}

	.main1 {
		width: 90%;
		margin: 0 auto;
		min-height: 23.75rem;
		margin-top: 1.25rem;
		background: rgb(255, 255, 255);
		border-radius: 8px;
		display: flex;
	}

	.live-course-thumb1 {
		width: 90%;
		margin: 2.25rem;
		margin-left: 50px;
	}

	.live-course-thumb {
		width: 320px;
		height: 240px;
		margin: auto 0;
		margin-left: 50px;
	}

	.live-course-thumb img {
		width: 100%;
		height: 100%;
		border-radius: 8px 8px 0 0;
		transition: all .5s;
	}

	.right-course-thumb {
		width: 60%;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

	}

	.course-info-title {
		width: 710px;
		height: 30px;
		font-size: 24px;
		font-weight: 500;
		color: rgb(51, 51, 51);
		line-height: 24px;
		margin-top: 20px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.desc {
		margin-top: 14px;
		width: 100%;
		height: 90px;
		font-size: 16px;
		font-weight: 400;
		color: rgb(102, 102, 102);
		line-height: 30px;
		overflow: hidden;
	}

	.has-button {

		background: rgb(244, 250, 254);
		border-radius: 4px;
		padding: 20px;
		font-size: 16px;
		font-weight: 400;
		color: rgb(153, 153, 153);
		line-height: 16px;
		box-sizing: border-box;

		cursor: pointer;
	}



	.chapter-name {
		width: 100%;
		height: 16px;
		font-size: 16px;
		font-weight: 500;
		color: rgb(51, 51, 51);
		line-height: 16px;
		margin-bottom: 30px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
	}

	.chapter-name:hover {
		color: #00DBCF;
	}

	.video-item {
		width: 100%;
		height: 70px;
		line-height: 70px;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		margin-bottom: 30 px;
		cursor: pointer;
		list-style: none;
		/* background-color: #00B6B4; */


	}

	.video-item:hover {}

	.course-chapter-box {
		width: 1200px;
		padding: 50px 30px;
		background: rgb(255, 255, 255);
		margin-top: 30px;
		border-radius: 8px;
	}

	.chapter-videos-box {
		width: 100%;
		height: auto;
		margin-top: 30 px;
	}

	.video-title {
		height: 14px;
		font-size: 14px;
		font-weight: 400;
		color: rgb(51, 51, 51);
		line-height: 14px;
		margin-left: 15px;
	}

	.play-icon {
		width: 24px;
		height: 24px;
		cursor: pointer;
	}

	.chapter-item {
		width: 100%;
		height: auto;
		margin-top: 50px;
	}

	.video-info {
		position: absolute;
		height: 14px;
		font-size: 14px;
		font-weight: 400;
		color: #999;
		line-height: 14px;
		top: 5 px;
		right: 0;
	}

	.tabs {
		width: 90%;
		margin: 0 auto;
		height: 72px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		padding: 28px 30px;
		background-color: white;
	}

	.item-tab {
		width: 64px;
		height: 16px;
		margin-right: 1.875rem;
		font-size: 16px;
		font-weight: 400;
		color: #666;
		line-height: 16px;
		margin-right: 80 px;
		cursor: pointer;
		position: relative;
	}

	.actline {
		width: 52px;
		height: 4px;
		background: #03d3bd;
		position: absolute;
		left: 6px;
		top: 40px;
	}

	.attach-item {
		width: 100%;
		box-sizing: border-box;
		height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 50px;
	}

	.attach-name {
		height: 16px;
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 16px;
	}

	.download-attach {
		margin-left: 30px;
		width: 104px;
		height: 40px;
		background: #03d3bd;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 400;
		color: #fff;
		cursor: pointer;
	}

	.attach-list-box {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 50px 20px;
		background: #fff;
		margin-top: 30px;
		border-radius: 8px;
	}
</style>
